.counts {
	display: flex;
	flex-flow: column;
	.chartBox {
		position: relative;
		height: 58px;
		margin-left: 5%;
		margin-right: 5%;
		&::after {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 1px;
			background: #ccc;
			content: '';
		}
		.chartTxt {
			padding: 15px 0 5px;
			color: #696c78;
			margin-left: 0.5rem;
		}
		.chartBig {
			font-size: 1.5rem;
		}
		.chart {
			position: absolute !important;
			right: -1rem;
			width: 30%;
		}
	}

	.content {
		display: flex;
		flex-flow: wrap;
		padding-left: 1rem;
		white-space: nowrap;
		& > div {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 0.5rem;
			margin-right: 1rem;
			margin-left: 0.5rem;
		}
		.color {
			display: inline-block;
			width: 0.5rem;
			height: 0.5rem;
			margin-right: 0.25rem;
			border-radius: 50%;
		}

		.label {
			color: var(--color-text-3);
			user-select: none;
		}

		.count {
			width: 1.5rem;
			text-align: right;
		}
	}
}
.df {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.charts {
	padding: 20px 20px;
	display: flex;
	.color {
			display: inline-block;
			width: 0.5rem;
			height: 0.5rem;
			margin-right: 0.25rem;
			border-radius: 50%;
		}

		.label {
			margin-left: 5px;
			color: #999ea8;
			user-select: none;
		}

		.count {
			width: 1.5rem;
			text-align: right;
		}
}
.f1 {
	flex: 1;
	div:nth-child(n+2) {
		margin-top: 10px;
	}
}
.wd1 {
	margin-left: 25px;
}
.wd {
	margin-left: 39px;
}
.wd2 {
	margin-left: 28px;
}
.ml1rem {
	margin-left: 1rem;
}
.fs16 {
	font-size: 16px;
}
